<template>
  <div class="header-container">
    <el-row type="flex" justify="space-between" class="content">
      <div class="left"></div>
      <el-row type="flex" justify="space-between" align="middle" class="right">
        <div>{{ time }}</div>
        <el-row type="flex" align="middle">
          <el-dropdown>
            <span class="user">
              超级管理员<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="full-btn" @click="toggleFullScreen">
            <el-image
              style="width: 20px; height: 20px"
              :src="fullBtn"
            ></el-image>
          </div>
        </el-row>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  name: "HeaderTop",
  data() {
    return {
      fullScreen: false,
      time: dayjs().format("YYYY年MM月DD日HH:mm:ss"),
      upIcon: require("@/assets/cockpit/up.png"),
      downIcon: require("@/assets/cockpit/down.png"),
      timeInterval: null,
    };
  },
  computed: {
    fullBtn: function () {
      const fullScreen = this.fullScreen;
      return fullScreen ? this.upIcon : this.downIcon;
    },
  },
  created() {
    this.getTime();
  },
  beforeDestroy() {
    clearInterval(this.timeInterval);
  },
  methods: {
    getTime() {
      this.timeInterval = setInterval(() => {
        this.time = dayjs().format("YYYY年MM月DD日HH:mm:ss");
      }, 1000);
    },
    toggleFullScreen() {
      //手动全屏
      if (
        !document.fullscreenElement && // alternative standard method
        !document.mozFullScreenElement &&
        !document.webkitFullscreenElement
      ) {
        if (document.documentElement.requestFullscreen) {
          document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
          document.documentElement.webkitRequestFullscreen(
            Element.ALLOW_KEYBOARD_INPUT
          );
        } else if (document.documentElement.webkitSupportsFullscreen) {
          document.documentElement.webkitEnterFullscreen();
        }
        this.fullScreen = true;
      } else {
        //退出全屏
        if (document.cancelFullScreen) {
          document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
        this.fullScreen = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.header-container {
  width: 100%;
  height: 157px;
  padding: 0 30px;
  background: url("~@/assets/cockpit/header_bg.png") no-repeat center / contain;
  .content {
    height: 53px;
    .right {
      width: 400px;
      .user {
        color: #ffffff;
      }
      .full-btn {
        margin-left: 25px;
      }
    }
  }
}
</style>
